<template>
	<view class="page">
		<view class="dahezi">
			<view class="shoujihao " @tap="changePhone">
				<text class="shoujihaowenzi">手机号</text>
				<text class="shoujihaohaoma">4008***823</text>
				<view class="tupianhezi">
					<image src="../../static/img/jiantouyou.png" mode=""></image>
				</view>
			</view>
			<view class="xiantiao"></view>
			<view class="shoujihao">
				<text class="shoujihaowenzi">微博</text>
				<text class="shoujihaohaoma">Alex</text>
				<view class="tupianhezi">
					<image src="../../static/img/jiantouyou.png" mode=""></image>
				</view>
			</view>
			<view class="xiantiao"></view>
			<view class="shoujihao">
				<text class="shoujihaowenzi">微信</text>
				<text class="shoujihaohaoma">未绑定</text>
				<view class="tupianhezi">
					<image src="../../static/img/jiantouyou.png" mode=""></image>
				</view>
			</view>
			<view class="xiantiao"></view>
			<view class="shoujihao">
				<text class="shoujihaowenzi">QQ</text>
				<text class="shoujihaohaoma">未绑定</text>
				<view class="tupianhezi">
					<image src="../../static/img/jiantouyou.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="dahezi">
			<view class="shoujihao dingekong">
				<text class="shoujihaowenzi">系统通知</text>
				<view class="uni-padding-wrap">
					<switch checked @change="switch1Change" class="check" />
				</view>
			</view>

			<view class="xiantiao"></view>
			<view class="shoujihao " @tap="showMessage">
				<text class="shoujihaowenzi">检查新版本</text>
				<text class="shoujihaohaoma"></text>
				<view class="tupianhezi">
					<image src="../../static/img/jiantouyou.png" mode=""></image>
				</view>
			</view>
			<view class="xiantiao"></view>
			<view class="shoujihao ">
				<text class="shoujihaowenzi">清除缓存</text>
				<text class="shoujihaohaoma"></text>
				<view class="tupianhezi">
					<!-- <view class="caseadress">
						<text class="hideShow" :class="{hideShowActive:showhide}">{{caselist.title}}</text>
					</view> -->
					<text>207M</text>
				</view>
			</view>
		</view>
		<view class="tuichu" @click="logout()">
			<text>退出账号</text>
		</view>








	</view>
</template>

<script>
	export default {
		data() {
			return {
			// 	caselist: {
			// 		'title': '类型标题'
			// 	},
			// 	sum: 0,
			// 	showhide: false,
			// 	setInter1： ''
			}
		},
		// onShow() {
		// 	clearInterval(this.setInter1)
		// 	this.setInter1 = setInterval(() => {
		// 		this.showhide = true
		// 		this.sum++
		// 		//这里请求数据然后在下一倒计时事件进行赋值
		// 		setTimeout(() => {
		// 			this.showhide = false
		// 			this.caselist.title = "新标题" + this.sum
		// 		}, 600)
		// 	}, 5000)
		// },
		methods: {
			changePhone() {
				uni.navigateTo({
					url: '/pages/changePhone/changePhone'
				})
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			switch2Change: function(e) {
				console.log('switch2 发生 change 事件，携带值为', e.detail.value)
			},
			showMessage() {
				uni.showToast({
					icon: 'error',
					title: '当前已是最新版本',
					duration: 2000
				})
			},
			logout() {
				uni.showModal({
					content: '确定要退出当前账号吗？',
					showCancel: true,
					cancelText: '取消',
					confirmColor: 'blue',
					// confirmText:'blue',
					confirmText: '确定',
					success: (res) => {
						uni.showToast({
								icon: 'success',
								title: '退出成功',
								duration: 2000
							}),
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							}, 2000)
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;


	}

	.dahezi {
		margin-top: 3%;
		background: white;

	}

	.dingekong {
		margin-top: 2%;
	}

	.shoujihao {

		margin-left: 6%;
		margin-right: 6%;
		display: flex;
		flex-direction: row;
		/* align-content: center;
		justify-content: space-between; */

	}

	.shoujihaohaoma {
		width: 60%;
		text-align: right;
	}

	.shoujihaowenzi {
		width: 90%;
		height: 80%;
	}

	.shoujihao text {
		line-height: 70px;
		height: 70px;
		font-size: 17px;

	}

	.tupianhezi {

		width: 50px;
		height: 50px;
		display: flex;
	}

	image {
		width: 18px;
		height: 18px;
		margin: auto;
		margin-right: 0px;
	}

	.xiantiao {
		width: 88%;
		margin-left: 6%;
		margin-right: 6%;
		border-bottom: 1px solid #a7a7a7;
	}

	.tuichu {
		margin-top: 3%;
		height: 50px;
		width: 100%;
		display: flex;
		background: white;

	}

	.tuichu text {
		width: 100%;
		color: red;
		font-size: 17px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		box-shadow: 10px 10px 50px 10px #f6f6f6;

	}

	.zuhe {
		display: flex;
		flex-direction: row;
		/* align-content: center;
		justify-content: space-between; */
	}

	.uni-padding-wrap {
		/* width: 100%; */
		height: 80%;
		/* margin-left: 100px; */
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: flex-end;
	}

	.check {
		/* width: 10%; */
		margin-top: 12px;
	}

	.hideShow {
		transition: all 0.4s;
		transform: inherit;
	}

	.hideShowActive {
		opacity: 0;
	}
</style>
